<template>
	<div class="my_setting">
		<van-sticky>
			<van-nav-bar title="修改" left-arrow @click-left="back" />
		</van-sticky>


		<div class="mb_18" @click="touxiang">
			<van-cell title="头像" style="height: 1.5rem;line-height: 1.1rem;">
				<!--  <img src="../vip/touxaing-moren.png" class="img" alt=""> -->
				<van-uploader :after-read="afterRead" v-if="fileList" v-model="fileList" :max-count="1" />

			</van-cell>
		</div>
		<div class="mb_18">
			<van-form validate-first>
				<!-- <van-cell title="昵称" :value="myMsg.nickName"></van-cell> -->
				<!-- <van-cell title="姓名" :value="myMsg.realName"></van-cell>
			<van-cell title="年龄" :value="myMsg.age"></van-cell>
			<van-cell @click="showLevel = true" :value="myMsg.sex" is-link>
				<template slot="title">
					<span class="custom-title">性别</span>
				</template>
			</van-cell>
			<van-cell title="职业" :value="myMsg.occupation"></van-cell>
			<van-cell title="公司" :value="myMsg.company"></van-cell> -->
				<van-field v-model="myMsg.nickName" label="昵称" input-align="right" />
				<van-field v-model="myMsg.realName" label="姓名" input-align="right" />
				<van-field v-model="myMsg.age" label="年龄" :rules="[{validator,message:'请输入正确的年龄'}]" input-align="right" />
				<van-field-select-picker label="性别" placeholder="请选择" v-model="myMsg.sex" :columns="['男','女']" input-align="right"
				 style="border-bottom: 1px solid #ebedf0;" />
				<van-field v-model="myMsg.occupation" label="职业" input-align="right" />
				<van-field v-model="myMsg.company" label="公司" input-align="right" />

				<!-- <van-field-select-picker label="性别" placeholder="请选择" v-model="myMsg.sex" :columns="['男','女']" />
			<van-field-select-picker label="品牌" placeholder="请选择" v-model="value2" :columns="[1, 2, 3]" />
			<van-field-select-picker label="规格" placeholder="请选择" v-model="value3" :columns="[1, 2, 3]" /> -->


			</van-form>
		</div>
		<!-- <div class="mb_18">
	  <van-field v-model="tel" type="tel" label="我的手机号" />
    </div> -->
		
		<div class="btn" @click="modify" >修改</div>
		<!-- <van-button type="primary" text="显示遮罩层"v-if="flag" > -->
			<van-overlay :show="flag" @click="flag = false" />
			<van-loading v-if="flag" size="30px" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">上传中...</van-loading>
			</van-overlay>
		<!-- </van-button> -->
	</div>
</template>

<script>
	import api from 'api/api'
	import { Overlay } from 'vant';
	export default {
		model: {
			prop: "selectValue"
		},
		props: {
			columns: {
				type: Array
			},
			selectValue: {
				type: String
			}
		},
		watch: {
			selectValue: function(newVal) {
				this.result = newVal;
			},
			result(newVal) {
				this.$emit("input", newVal);
			}
		},
		data() {
			return {
				show: false,
				result: this.selectValue,
				chosenAddressId: '1',
				flag:false,
				fileList: [{
					url: ''
				}],

				text: '昵称',
				tel: '13310123158',
				myMsg: '',
				avatarFileId: "",
				showSex: ["男", "女"]
			}
		},
		created() {
			this.myMsg = JSON.parse(localStorage.getItem('my'))
			this.fileList[0].url = require('../vip/touxaing-moren.png')
			if (!JSON.parse(localStorage.getItem('my')).avatarFile) {
				// this.fileList[0].url='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588762745762&di=1c22bf4f5aedf8162da8e4205e5b2756&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg'
				this.fileList[0].url = require('../vip/touxaing-moren.png')
				return
			}
			this.fileList[0].url = JSON.parse(localStorage.getItem('my')).avatarFile.uriPath
		},
		methods: {
			validator(val) {
				var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
				if (!age.test(val)) {
					return false;
				} else {
					return true;
				}
			},
			onConfirm(value) {
				this.result = value;
				this.show = !this.show;
			},
			back() {
				window.history.go(-1)
			},
			modify() {
				api.modify({
					data: {
						avatarFileId: this.avatarFileId,
						nickName: this.myMsg.nickName,
						realName: this.myMsg.realName,
						age: this.myMsg.age,
						sex: this.myMsg.sex,
						occupation: this.myMsg.occupation,
						company: this.myMsg.company

					}
				}).then(res => {
					if (res.code == 200) {

						this.$toast('修改成功')
						this.$router.push('my')
						// },2000)
					}
				})
			},
			touxiang() {

			},
			afterRead(file) {
				this.flag=true
				// 此时可以自行将文件上传至服务器
				console.log(file);
				// return
				var data = new FormData();
				var userInfor = JSON.parse(localStorage.getItem('userInfor'))
				data.append('file', file.file)
				data.append('accessToken', userInfor.accessToken)
				data.append('path', 'my/message')
				api.upload(data).then(res => {
						if (res.code == 200) {
							this.$toast('上传成功')
							this.avatarFileId = res.data.fileId
							this.flag=false
						} else {
							this.$toast("上传失败")
						}
					})
					.catch(res => {
						this.$toast('err')
					})

			},

		}
	}
</script>

<style lang="scss">
	.my_setting {
		min-height: 100vh;
		background-color: #f5f5f5;
		text-align: left;

		.btn {
			width: 6.88rem;
			height: 0.91rem;
			line-height: 0.91rem;
			text-align: center;
			background: linear-gradient(96deg,
				rgba(72, 143, 240, 1),
				rgba(51, 130, 239, 1));
			border-radius: 0.45rem;
			margin: 0 auto;
			color: #fff;
			font-size: 0.36rem;
		}

		.mb_18 {
			margin-bottom: 0.18rem;
		}

		.mb_105 {
			margin-bottom: 1.05rem;
		}

		.img {
			width: 1rem;
			height: 1rem;
			border-radius: 50% !important;

		}

		.van-uploader__upload,
		.van-uploader__preview-image {
			width: 1rem;
			height: 1rem;
			border-radius: 50% !important;
		}

		.van-uploader__preview-delete {
			position: absolute;
			top: -2px;
			right: -8px;
			color: #969799;
			font-size: 18px;
			background-color: #fff;
			border-radius: 100%;
		}
	}
</style>
